<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxz">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>天气预报</title>
</head>
<body>
    <form>
        <input type="text" name="citykey" class="city" value="101180101">
        <input type="submit" value="提交">
    </form>
    <h1></h1>
    <main></main>
</body>
</html>
<script>
document.forms[0].onsubmit = function(ev){
    ev.preventDefault();


    
    // 1.创建对象
    var xhr = new XMLHttpRequest();
    // 2.处理数据
    xhr.onreadystatechange = function(){
        // 请求完成
        if(xhr.readyState == 4){
            var data = xhr.responseText;        
            var object = JSON.parse(data).data;
            console.dir(object);
            var main = document.querySelector('main');
            var message = '';
            for(var i = 0; i < object.forecast.length; i ++){
                console.log('ss')
                var n = object.forecast[i];
                console.log(n);
                message += '<section>';
                message += '<h2>'+n.date+'</h2>';
                message += '<p>'+n.fengli+'</p>';
                message += '<p>'+n.high+'</p>';
                message += '<p>'+n.type+'</p>';
                message += '<p>'+n.low+'</p>';
                message += '<p>'+n.fengxiang+'</p>';
                message += '</section>';
            }
            main.innerHTML = message;
        }
    }


    // 3.发送请求
    var param = document.querySelector('.city').value
    var url = 'http://wthrcdn.etouch.cn/weather_mini?citykey=' + param;
    // console.log(url);
    xhr.open('GET',url);
    xhr.send();
}
</script>
